<template>
    <div style="width: 100vw;height:100vh;overflow: hidden" class="flcc pos-r login">
        <div class="pos-a t0 l0 r0 b0 flcc trans" style="z-index: 100">
            <mu-paper :z-depth="15" class="ofh round5" :class="{show:showLogin,hide:!showLogin}">
                <div class="flex-r ofh round5" style="width: 800px;height: 500px;">
                    <div class="flex1 bc13 round5">
                        <div class="flcc pad10">
                            <mu-icon value="home" color="primary" size="42"></mu-icon>
                            <div>官网</div>
                        </div>
                        <div class="flcc pad10">
                            <mu-icon value="phone" color="primary" size="42"></mu-icon>
                            <div>电话</div>
                        </div>
                        <div class="flcc pad10">
                            <mu-icon value="mail" color="primary" size="42"></mu-icon>
                            <div>邮箱</div>
                        </div>
                        <div class="flcc pad10">
                            <mu-icon value="chat" color="primary" size="42"></mu-icon>
                            <div>留言</div>
                        </div>
                    </div>
                    <div class="flex5 pad20">
                        <h1>智慧云管理后台</h1>
                        <h6 class="c12">智慧云管理后台</h6>
                        <div>
                            <mu-text-field v-model="username" label-float label="账号" help-text="请输入账号、手机或者邮箱" type="text"
                                           full-width></mu-text-field>
                        </div>
                        <div>
                            <mu-text-field v-model="password" label-float label="密码"
                                           :action-icon="visibility ? 'visibility_off' : 'visibility'"
                                           :action-click="() => (visibility = !visibility)"
                                           :type="visibility ? 'text' : 'password'" full-width icon=""></mu-text-field>
                        </div>
                        <div>
                            <mu-checkbox label="我已阅读《XXXXX》" v-model="read"></mu-checkbox>
                        </div>
                        <div class="mart30">
                            <mu-button full-width color="primary" @click="login" round>登陆</mu-button>
                        </div>
                    </div>
                    <div class="flex3 flcc cf round5" style="background: #0396ff">
                        <h1>没有账号?</h1>
                        <h4>联系管理员开通</h4>
                        <div class="mart30">
                            <mu-tooltip content="TEL:13054666607" placement="top">
                                <mu-button icon fab>
                                    <mu-icon value="phone"></mu-icon>
                                </mu-button>
                            </mu-tooltip>
                        </div>
                    </div>
                </div>
            </mu-paper>
        </div>
        <div class="pos-a t0 l0 r0 b0 flcc" style="z-index: 90">
            <div class="trans loading" :class="{show:!showLogin,hide:showLogin}">
                <EzLoading class="bcf mar3 round30" :done="prepare.info"><div class="pad5">加载基础数据</div></EzLoading>
                <EzLoading class="bcf mar3 round30" :done="prepare.model"><div class="pad5">加载模块数据</div></EzLoading>
                <EzLoading class="bcf mar3 round30" :done="prepare.page"><div class="pad5">加载权限信息</div></EzLoading>
                <EzLoading class="bcf mar3 round30" :done="prepare.func"><div class="pad5">加载功能资源</div></EzLoading>
                <EzLoading class="bcf mar3 round30" :done="prepare.custom"><div class="pad5">加载偏好设置</div></EzLoading>
            </div>
        </div>
        <vue-particles color="#0396ff" linesColor="#0396ff" style="width: 100vw;height:100vh;z-index: -1;" class="pos-a l-9 r0 t-9 b0"></vue-particles>
    </div>
</template>

<script>
    import EzLoading from "@/comps/login/EzLoading";
    export default {
        name: "ez-login",
        components: {EzLoading},
        data() {
            return {
                visibility: false,
                username: "sa",
                password: "123123",
                read: true,
                showLogin: true,

                prepare:{
                    //检查状态
                    ready:false,
                    readyCount:0,
                    readyNeed:5,

                    //数据加载子项
                    info:false,//管理员信息
                    model:false,//模块入口信息
                    page:false,//页面权限
                    func:false,//功能权限
                    custom:false,//私人数据，缓存，自定义配置等
                }
            }
        },
        methods: {
            login() {
                this.$http.post("/auth/User/login", {
                    username: this.username,
                    password: this.password,
                }, res => {
                    //设置缓存数据
                    this.$ezstore.auth.setToken(res.data.account.token)
                    this.$ezstore.auth.setIsLogin(true)
                    this.$ezstore.auth.setUser(res.data.account)
                    //设置token缓存
                    localStorage.setItem(this.$http.authKey, res.data.account.token)

                    this.showLogin = false
                    this.getUserModel()
                    this.getUserInfo()
                    this.getUserFunc()
                    this.getUserPage()
                    this.getUserCustom()
                })
            },
            toggle(){
                this.showLogin = !this.showLogin
            },
            getUserModel(){
                this.$http.post("/auth/admin/Model/my",{},res=>{
                    this.$ezstore.auth.setModels(res.data.models)
                    this.prepare.model = true
                    this.prepare.readyCount++
                    this.checkReady()
                })
            },
            getUserInfo(){
                setTimeout(()=>{
                    this.prepare.info = true
                    this.prepare.readyCount++
                    this.checkReady()
                },700)
            },
            getUserPage(){
                this.$http.post("/auth/admin/Page/my",{},res=>{
                    this.$ezstore.auth.setPages(res.data.pages)
                    this.prepare.page = true
                    this.prepare.readyCount++
                    this.checkReady()
                })
            },
            getUserFunc(){
                setTimeout(()=>{
                    this.prepare.func = true
                    this.prepare.readyCount++
                    this.checkReady()
                },300)
            },
            getUserCustom(){
                setTimeout(()=>{
                    this.prepare.custom = true
                    this.prepare.readyCount++
                    this.checkReady()
                },1700)
            },
            checkReady(){
                if (this.prepare.readyCount === this.prepare.readyNeed){
                    this.$toast.success("数据准备完毕！")
                    //跳转到首页
                    setTimeout(()=>{
                        this.$router.replace("/v1/welcome")
                    },1000)
                }
            }
        }
    }
</script>

<style scoped>
    .login .show{
        opacity: 1;
        transform: scale(1,1);
    }
    .login .hide{
        opacity: 0.1;
        transform: scale(0,0);
        overflow: hidden;
    }
    .login .trans{
        transition: opacity,transform;
        transition-duration: 0.3s;
    }
    .login .loading {
        transition-delay: .2s;
    }

</style>